<template>
  <el-row :gutter="20">
    <el-col :span="16">
      <div class="my-body">
        <el-form :inline="true" :modal="searchForm">
          <el-form-item>
            <el-input placeholder="请输入" maxlength="100" v-model="searchForm.roleName">
              <template slot="prepend">角色名</template>
            </el-input>
          </el-form-item>
          <el-button type="primary" style="width: 100px" @click="init">查询</el-button>
          <el-button type="primary" plain style="width: 100px" @click="dialogShow = true">添加</el-button>
        </el-form>
        <el-table :data="tableData" border ref="multipleTable">
          <el-table-column label="角色名" prop="roleName"/>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-link type="primary" :loading="loading" :underline="false" @click="edit(scope.row)">编辑</el-link>
              <el-link type="success" :loading="loading" :underline="false" @click="authorize(scope.row)"
                       style="margin-left: 5px;">授权
              </el-link>
              <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="del(scope.row)">
                <el-link type="danger" slot="reference" :loading="loading" :underline="false" style="margin-left: 5px;">
                  删除
                </el-link>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" style="margin-top: 10px" v-show="page.total"
                       :page-size="page.pageSize"
                       :total="page.total"
                       :current-page="page.currentPage"
                       @current-change="currentChange">
        </el-pagination>
      </div>
    </el-col>
    <!--  编辑-->
    <el-dialog title="编辑" :close-on-click-modal="false" :visible.sync="dialogShow" width="500px" @close="closeMode">
      <el-form ref="form" :model="form" :rules="rules" label-width="60px" style="margin-right: 50px">
        <el-form-item label="名称">
          <el-input v-model="form.roleName" placeholder="请输入"/>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button @click="dialogShow = false">关闭</el-button>
        <el-button type="primary" @click="submit()" :loading="loading">提交</el-button>
      </el-row>
    </el-dialog>
    <el-col :span="8">
      <div class="my-body">
        <el-divider content-position="left">{{ row.roleName }}编辑</el-divider>
        <el-tabs v-model="resourcesForm.permissionGroups">
          <el-tree empty-text="暂无内容" ref="resourcePermissions"
                   :data="resources"
                   show-checkbox
                   node-key="id"
                   default-expand-all :props="{label:'permissionName'}"
                   :expand-on-click-node="false">
          <span class="custom-tree-node my-text-cc" slot-scope="{ node, data }">
                 <span class="my-text-cc" @click="edit( data)" style="flex-grow:1">
                   <i :class="data.permissionGroups==='MENU'?
                     'el-icon-menu':data.permissionGroups==='BTN'?
                     'el-icon-s-opportunity':'el-icon-s-check'" style="color: #E6A23C"/>
                   {{ node.label }}<span style="color: #C0C4CC;margin-left: 20px;">{{ data.permissionCode }}</span>
                 </span>
           </span>
          </el-tree>
        </el-tabs>
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="submitB" style="width: 100px" :loading="loading"
                     :disabled="!Object.keys(row).length">提交
          </el-button>
          <el-button style="width: 100px" @click="reset">重置</el-button>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import service from "@/api/service";
import table from "@/mixins/table";

export default {
  name: "role",
  mixins: [table],
  data() {
    return {
      form: {
        roleName: '',
      },
      rules: {
        roleName: {required: true, trigger: 'blur', message: '不能为空'},
      },
      resources: [],
      resourcesForm: {
        resources: []
      },
      strictly: false,
      dialogShowB: false,
    }
  },
  mounted() {
    service.get('/small-service-account/au-permission').then(res => {
      if (res.status === 200) {
        this.resources = res.data;
      }
    })
    this.init()
  },
  methods: {
    init() {
      let form = {
        ...this.searchForm,
        page: this.page.currentPage
      }
      service.get('/small-service-account/au-role', form).then(res => {
        if (res.status === 200) {
          this.tableData = res.data;
          this.page.total = res.total;
        }
      })
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let form = {...this.form}
          if (form.id) {
            service.put('/small-service-account/au-role', form).then(this.callback)
          } else {
            service.post('/small-service-account/au-role', form).then(this.callback)
          }
        }
      })
    },
    edit(row) {
      this.form = row
      this.dialogShow = true
    },
    del(row) {
      service.del('/small-service-account/au-role', {id: row.id}).then(this.callback)
    },
    submitB() {
      this.loading = true;
      let list = this.$refs.resourcePermissions.getCheckedKeys()
      let arr = this.$refs.resourcePermissions.getHalfCheckedKeys()
      if (arr.length) {
        // list.concat(arr)
        list.push(...arr)
      }
      let form = {
        id: this.row.id,
        list: list
      }
      service.put('/small-service-account/au-role/authorize', form).then(res => {
        this.loading = false;
        if (res.status === 200) {
          this.$message.success(res.message)
          this.dialogShowB = false
          this.resourcesForm.resources = []
        } else {
          this.$message.error(res.message)
        }
      })
    },
    authorize(row) {
      this.row = row
      this.dialogShowB = true
      this.strictly = true
      service.get('/small-service-account/au-permission/find-by-role-id', {id: row.id}).then(res => {
        if (res.status === 200) {
          this.resourcesForm.resources = res.data
          this.$refs.resourcePermissions.setCheckedKeys(res.data)
        }
      })
    },
    reset() {

    }
  }
}
</script>

<style scoped>

</style>